<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Input Example with Add/Remove Buttons</title>
<style>
    .input-group {
        margin-bottom: 10px;
    }
</style>
</head>
<body>

<h2>Enter Multiple Values</h2>

<form id="inputForm" action="/submit-form" method="post">
    <div id="inputContainer">
        <div class="input-group">
            <label for="input1">Input 1:</label>
            <input type="text" id="input1" name="input1">
            <button type="button" class="removeButton">-</button>
        </div>

        <div class="input-group">
            <label for="input2">Input 2:</label>
            <input type="text" id="input2" name="input2">
            <button type="button" class="removeButton">-</button>
        </div>

        <div class="input-group">
            <label for="input3">Input 3:</label>
            <input type="text" id="input3" name="input3">
            <button type="button" class="removeButton">-</button>
        </div>
    </div>

    <button type="button" id="addButton">Add Input Field</button><br><br>

    <input type="submit" value="Submit">
</form>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const addButton = document.getElementById('addButton');
        const inputContainer = document.getElementById('inputContainer');
        
        addButton.addEventListener('click', function() {
            const newInputId = inputContainer.children.length + 1;
            
            const newInputGroup = document.createElement('div');
            newInputGroup.classList.add('input-group');
            
            const newLabel = document.createElement('label');
            newLabel.setAttribute('for', 'input' + newInputId);
            newLabel.textContent = 'Input ' + newInputId + ':';
            
            const newInput = document.createElement('input');
            newInput.setAttribute('type', 'text');
            newInput.setAttribute('id', 'input' + newInputId);
            newInput.setAttribute('name', 'input' + newInputId);
            
            const removeButton = document.createElement('button');
            removeButton.setAttribute('type', 'button');
            removeButton.classList.add('removeButton');
            removeButton.textContent = '-';
            
            removeButton.addEventListener('click', function() {
                newInputGroup.remove();
            });
            
            newInputGroup.appendChild(newLabel);
            newInputGroup.appendChild(newInput);
            newInputGroup.appendChild(removeButton);
            
            inputContainer.appendChild(newInputGroup);
        });
        
        const removeButtons = document.querySelectorAll('.removeButton');
        removeButtons.forEach(function(button) {
            button.addEventListener('click', function() {
                button.parentElement.remove();
            });
        });
    });
</script>

</body>
</html>
